<template>
    <div>{{msg}}</div>
    <div class="mui-content enterpriseOrderSearch">
        <!--搜索框-->
        <div class="mui-input-row searchWarp mgb1">
            <div class="searchType mui-pull-left mui-text-center" @click="searchTypeClick()">
                <span class="searchTypeText color1 text2-size" id="searchTypeText">订单编号</span>
                <i class="mui-icon mui-icon-arrowdown text2-size color1"></i>
            </div>
            <div class="mui-search  mui-pull-left  searchInput">
                <input type="text" class="mui-input-clear color2" placeholder="请输入搜索关键字" data-input-clear="1" data-input-search="1">
            </div>
            <div class="mui-pull-left  searchBtn mui-text-center">
                <i class="mui-icon mui-icon-search  color2 mui-text-center"></i>
            </div>
        </div>
        <ul class="mui-table-view mgb1">
            <li class="mui-table-view-cell orderTitle">
                <p class="col-8  text3">
                    <span class="color1">订单编号:</span>
                    <span class="color1">BP201609230158</span>
                </p>
                <p class="col-4 mui-text-right orderType notConfirm">待确认</p>
            </li>
            <li class="mui-table-view-cell orderText">
                <p class="col-6">
                    <span class="color1 text2-size">苏BQ667A</span>
                </p>
                <p class="col-6 mui-text-right">
                    <span class="color2 text3-size">预估：</span>
                    <span class="color1 text2-size">
                                        <span>￥</span>
                                        <span>300.00</span>
                                    </span>
                </p>
            </li>
            <li class="mui-table-view-cell orderContacts">
                <p class="color2 text3-size">张三，13800000000</p>
            </li>
            <li class="mui-table-view-cell">
                <div class="col-7 mui-pull-right orderOperateBtn">
                    <div class="col-6 mui-pull-left">
                        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined confirmRepairBtn">确认维修</button>
                    </div>
                    <div class="col-6 mui-pull-left">
                        <button type="button" class="mui-btn mui-btn-outlined cancelOrderBtn">取消订单</button>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="mui-table-view mgb1">
            <li class="mui-table-view-cell orderTitle">
                <p class="col-8  text3">
                    <span class="color1">订单编号:</span>
                    <span class="color1">BP201609230158</span>
                </p>
                <p class="col-4 mui-text-right orderType notRepair">待维修</p>
            </li>
            <li class="mui-table-view-cell orderText">
                <p class="col-6">
                    <span class="color1 text2-size">苏BQ667A</span>
                </p>
                <p class="col-6 mui-text-right">
                    <span class="color2 text3-size">预估：</span>
                    <span class="color1 text2-size">
                                        <span>￥</span>
                                        <span>300.00</span>
                                    </span>
                </p>
            </li>
            <li class="mui-table-view-cell orderContacts">
                <p class="color2 text3-size col-6 mui-pull-left">张三，13800000000</p>
                <p class="color1 text3-size col-6 mui-pull-right mui-text-right">2016- 10-30 11:30到店</p>
            </li>
            <li class="mui-table-view-cell">
                <div class="col-7 mui-pull-right orderOperateBtn">
                    <div class="col-6 mui-pull-left">
                        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined confirmRepairBtn">确认维修</button>
                    </div>
                    <div class="col-6 mui-pull-left">
                        <button type="button" class="mui-btn mui-btn-outlined cancelOrderBtn">取消订单</button>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="mui-table-view mgb1">
            <li class="mui-table-view-cell orderTitle">
                <p class="col-8  text3">
                    <span class="color1">订单编号:</span>
                    <span class="color1">BP201609230158</span>
                </p>
                <p class="col-4 mui-text-right orderType finish">已完成</p>
            </li>
            <li class="mui-table-view-cell orderText">
                <p class="col-6">
                    <span class="color1 text2-size">苏BQ667A</span>
                </p>
                <p class="col-6 mui-text-right">
                    <span class="color2 text3-size">预估：</span>
                    <span class="color1 text2-size">
                                        <span>￥</span>
                                        <span>300.00</span>
                                    </span>
                </p>
            </li>
            <li class="mui-table-view-cell orderContacts">
                <p class="color2 text3-size col-6 mui-pull-left">张三，13800000000</p>
                <p class="color1 text3-size col-6 mui-pull-right mui-text-right">2016- 10-30 11:30到店</p>
            </li>
            <li class="mui-table-view-cell">
                <div class="col-7 mui-pull-right orderOperateBtn">
                    <div class="col-6 mui-pull-right">
                        <button type="button" class="mui-btn mui-btn-primary viewRatingsBtn">查看评价</button>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="mui-table-view mgb1">
            <li class="mui-table-view-cell orderTitle">
                <p class="col-8  text3">
                    <span class="color1">订单编号:</span>
                    <span class="color1">BP201609230158</span>
                </p>
                <p class="col-4 mui-text-right orderType alreadyClosed">已关闭</p>
            </li>
            <li class="mui-table-view-cell orderText">
                <p class="col-6">
                    <span class="color1 text2-size">苏BQ667A</span>
                </p>
                <p class="col-6 mui-text-right">
                    <span class="color2 text3-size">预估：</span>
                    <span class="color1 text2-size">
                                        <span>￥</span>
                                        <span>300.00</span>
                                    </span>
                </p>
            </li>
            <li class="mui-table-view-cell orderContacts">
                <p class="color2 text3-size col-6 mui-pull-left">张三，13800000000</p>
            </li>
        </ul>
    </div>
</template>
<style>
    .enterpriseOrderSearch .score{font-size: 0.38rem; color:#ff8317;}
    .enterpriseOrderSearch .separate , .commentList .totalScore{font-size: 0.28rem; color:#000;}
    .enterpriseOrderSearch .searchWarp{height: 0.8rem; line-height: 0.8rem; background: #fff; border-bottom: 1px solid #dcdbe1;}
    .enterpriseOrderSearch .searchWarp .searchType{padding-left: 0.3rem; width: 35%; }
    .enterpriseOrderSearch .searchWarp .searchInput{height:0.8rem;width: 50%;}
    .enterpriseOrderSearch .searchWarp .searchInput>input{width:100%; height:0.8rem; border:none !important; padding:0 0.1rem; font-size: 0.28rem;}
    .enterpriseOrderSearch .searchWarp .searchBtn{height:0.8rem;width: 15%;}
    .enterpriseOrderSearch .searchWarp .searchBtn .mui-icon-search{font-size: 0.55rem; line-height: 0.8rem;}
</style>
<script type="text/ecmascript-6">
    import pickerComponent from '../../components/picker/picker.vue';
    import '../../fonts/mui.css';
    export default {
        data(){
            return{
            }
        },
        ready () {
            mui.init({

            });
        },
        components:{
            pickerComponent
        },
        methods:{
            searchTypeClick:function() {
                (function($, doc) {
                    $.init();
                    $.ready(function() {
                        //普通示例
                        var userPicker = new $.PopPicker();
                        userPicker.setData([{
                            value: 'bjg',
                            text: '订单编号'
                        }, {
                            value: 'lsqx',
                            text: '车牌号'
                        }, {
                            value: 'wfqd',
                            text: '车主联系方式'
                        }]);
                        var showUserPickerButton = doc.getElementById('showUserPicker');
                        var userResult = doc.getElementById('searchTypeText');
                        userPicker.show(function(items) {
                            userResult.innerText = items[0].text;
                        }, false);
                    });
                })(mui, document);
            }
        },
    };

</script>